<template>
  <div class="page">
    <div class="page-top">
      <!-- 面包屑 -->
      <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
    </div>
    <div class="page-content">
      <a-form-model
        layout="inline"
        style="margin-bottom: 20px"
        :form="form"
        @submit="handleSubmit"
      >
        <a-form-model-item label="系统">
          <a-select
            default-value="全部"
            style="width: 100px"
            v-model="form.systemType"
          >
            <a-select-option value="全部"> 全部 </a-select-option>
            <a-select-option value="用友"> 用友 </a-select-option>
            <a-select-option value="金蝶"> 金蝶 </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="日志类型">
          <a-select
            default-value="全部"
            style="width: 100px"
            v-model="form.errorType"
          >
            <a-select-option value="全部"> 全部 </a-select-option>
            <a-select-option value="info日志"> info日志 </a-select-option>
            <a-select-option value="错误日志"> 错误日志 </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="创建时间">
          <a-range-picker
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            v-model="timeValue"
            @change="bindTime"
          />
        </a-form-model-item>
        <a-form-model-item label="系统单号">
          <a-input v-model="form.orderNo"></a-input>
        </a-form-model-item>
        <a-form-model-item label="京东单号">
          <a-input v-model="form.jdOrder"></a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" html-type="submit"> 提交 </a-button>
          <a-button style="margin-left: 15px" @click="bindReset">
            重置
          </a-button>
        </a-form-model-item>
      </a-form-model>
      <a-table
        :columns="columns"
        :data-source="data"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <span slot="systemType" slot-scope="record">
          {{ record == 1 ? "用友" : "金蝶" }}
        </span>
        <span slot="content">...</span>
        <span slot="errorMessage">...</span>
        <p slot="expandedRowRender" slot-scope="record" style="width: 1200px">
          日志内容：
          <br />
          {{ record.content }}
          <br />
          <br />
          错误信息：
          <br />
          {{ record.errorMessage }}
        </p>
      </a-table>
    </div>
  </div>
</template>
<script>
import Hreadcrumb from "@/components/Hreadcrumb";
import { getLogList } from "@/request/api";
export default {
  data() {
    return {
      loading: false,
      hreadcrumbAry: [
        { name: "首页", path: "/", query: {} },
        { name: "日志管理", path: "", query: {} },
        { name: "仓库对接日志", path: "/loglist", query: {} },
      ],
      columns: [
        {
          title: "系统单号",
          dataIndex: "orderNo",
          key: "orderNo",
        },
        {
          title: "京东单号",
          dataIndex: "jdOrder",
          key: "jdOrder",
        },
        {
          title: "系统",
          dataIndex: "systemType",
          key: "systemType",
          width: 80,
          slots: { title: "系统" },
          scopedSlots: { customRender: "systemType" },
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
          width: 120,
        },
        {
          title: "日志内容",
          dataIndex: "content",
          key: "content",
          slots: { title: "日志内容" },
          scopedSlots: { customRender: "content" },
        },
        {
          title: "错误信息",
          dataIndex: "errorMessage",
          key: "errorMessage",
          slots: { title: "错误信息" },
          scopedSlots: { customRender: "errorMessage" },
        },
      ],
      pagination: { current: 1, size: 10 },
      data: [],
      form: {
        systemType: "全部",
        orderNo: "",
        jdOrder: "",
        errorType: "全部",
        startTime: "",
        endTime: "",
      },
      timeValue: undefined,
    };
  },
  components: {
    Hreadcrumb,
  },
  created() {
    this.getLogList(1, 10);
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "validate_other" });
  },
  methods: {
    async getLogList(p, ps) {
      this.loading = true;
      let errorType =
          this.form.errorType == "全部"
            ? -1
            : this.form.errorType == "info日志"
            ? 0
            : 1,
        systemType =
          this.form.systemType == "全部"
            ? -1
            : this.form.systemType == "用友"
            ? 1
            : 2;
      let { startTime, endTime } = this.form;
      let params =
        "p=" +
        (p - 1) +
        "&ps=" +
        ps +
        "&errorType=" +
        errorType +
        "&systemType=" +
        systemType +
        "&startTime=" +
        startTime +
        "&endTime=" +
        endTime +
        "&orderNo=" +
        this.form.orderNo +
        "&jdOrder=" +
        this.form.jdOrder;
      let { data } = await getLogList(params);
      console.log(data);
      if (data.success) {
        this.loading = false;
        let pagination = { ...this.pagination };
        pagination.total = data.content.total;
        this.pagination = pagination;
        this.data = data.content.records;
      } else {
        this.loading = false;
        this.data = [];
      }
    },
    handleTableChange(pagination) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.getLogList(pager.current, pager.size);
    },
    handleSubmit(e) {
      e.preventDefault();
      console.log(this.form);
      this.getLogList(1, 10);
    },
    bindTime(date, dateString) {
      console.log(date, dateString);
      this.form.startTime = dateString[0];
      this.form.endTime = dateString[1];
    },
    bindReset() {
      this.form = {
        systemType: "全部",
        orderNo: "",
        jdOrder: "",
        errorType: "全部",
        startTime: "",
        endTime: "",
      };
      this.timeValue = undefined;
      this.getLogList(1, 10);
    },
  },
};
</script>
<style>
.page-content {
  background-color: #fff;
  padding: 25px;
}
</style>